<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <jsp:include page="common.jsp"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/css/register.css">

</head>

<body>
<!-- 头部 -->
<jsp:include page="header.jsp"/>
<!-- 头部 end -->
<div class="rg_layout">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>新用户注册</p>
        </div>
        <div class="rg_form_center">

            <!--注册表单-->
            <form id="registerForm" method="post" action="">
                <!--提交处理请求的标识符-->
                <input type="hidden" name="action" value="register">
                <table style="margin-top: 25px;">
                    <tr>
                        <td class="td_left">
                            <label for="username">用户名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="username" name="username" placeholder="请输入账号">
                        </td>

                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="password">密码</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="password" name="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="email">Email</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="email" name="email" placeholder="请输入Email">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="name">姓名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="telephone">手机号</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="sex">性别</label>
                        </td>
                        <td class="td_right gender">
                            <input type="radio" id="sex" name="sex"  class="sex" value="男"checked > 男
                            <input type="radio" name="sex"  class="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="birthday">出生日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="check">验证码</label>
                        </td>
                        <td class="td_right check">
                            <input type="text" id="check" name="check" class="check">
                            <img src="/captcha" id="verifyImg" height="32px" alt="">
                            <script type="text/javascript">
                                //图片点击事件
                                $(function () {
                                    $('#verifyImg').click(function (ev) {
                                        //对于src路径来说，必须不一致才会发送请求，如果修改的src和上次一样，则不会发送请求
                                        //如果访问的是动态资源则都会发送请求
                                        $('#verifyImg').attr('src', '/captcha?time=' + new Date().getTime())
                                    })
                                })
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        </td>
                        <td class="td_right check">
                            <button  class="submit" type="button" id="submit" value="注册">注册</button>
                            <span id="msg" style="color: red;"></span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_form_right">
            <p>
                已有账号？
                <a href="/jsp/login.jsp">立即登录</a>
            </p>
        </div>
    </div>
</div>
<!-- 底部 -->
<jsp:include page="footer.jsp"/>
<script type="text/javascript">
    //注册事件
    $(function () {
        $('#submit').click(function (ev) {
            //获取表单数据
            var username = $('#username').val();
            var password = $('#password').val();
            var verCode = $('#check').val()
            var email = $('#email').val()
            var name = $('#name').val()
            var telephone = $('#telephone').val()
            var sex = $('.sex:checked').val()
            var birthday = $('#birthday').val()
            // alert(email+"--"+name+"--"+telephone+"--"+sex+"--"+birthday)
            if (verCode === '') {
                $('#msg').html('验证码不能为空').css('display', 'block')
                return
            }
            if (username === '' || password === '') {
                $('#msg').html('用户名或密码不能为空').css('display', 'block')
                return
            }


            $.get('/user/register', {
                username: username, password: password, email: email,
                name: name, telephone: telephone, sex: sex, birthday: birthday,
                verCode: verCode
            }, function (result) {
                if (result.code === 0) {
                    alert("注册失败！请重试...")
                    //如果不成功，要重新刷新验证码
                    $('#verifyImg').attr('src', '/captcha?time=' + new Date().getTime())
                } else {
                    //跳转页面
                    var isSure = confirm("注册成功，去登录？");
                    if (isSure) {
                        location.href = "/jsp/login.jsp";
                    }
                }
            })
        })

    })
</script>


</body>

</html>